import React, { Component } from 'react';
import { NavBar, Icon } from 'antd-mobile';
import style from './index.module.scss'

class Com extends Component {
  state = {
    tab: 1
  }

  to (num) {
    this.setState({
      tab: num
    })
  }
  render() {
    return (
      <div className='box'>
       <div className="centent">
        <NavBar
            mode="light"
            icon={<span className="iconfont icon-fanhui" style={{ fontSize: '0.23rem', color: '#00B145' }}></span>}
            onLeftClick={() => {
              console.log(111)
              this.props.history.go(-1)
            
            }}
            rightContent={[
              <Icon key="1" type="ellipsis" style={{ fontSize: '0.23rem', color: '#00B145' }}/>,
            ]}
          >专栏</NavBar>
          <div className={style.tou}>
            <img src="" alt="" className={style.tu}/>
            <div className={style.title}>小兔子爱旅行</div>
            <div className={style.jie}>阿道夫第三方杀对方水电费水电费士大夫是的第三方答复都是防守打法</div>
            <div className={style.ding}><span>+订阅专栏</span></div>
            <span>4625人订阅</span>
          </div>
          <div className={style.tab}>
            <div className={this.state.tab === 1 ? style.bian : style.qie} onClick={ () => { this.to(1)}}>全部</div>
            <div className={this.state.tab === 2 ? style.bian : style.qie} onClick={ () => { this.to(2)}}>泰国</div>
            <div className={this.state.tab === 3 ? style.bian : style.qie} onClick={ () => { this.to(3)}}>清迈</div>
            <div className={this.state.tab === 4 ? style.bian : style.qie} onClick={ () => { this.to(4)}}>新加坡</div>
          </div>
          <div className={style.wenz}>
            <div className={style.no1}>全部文章</div>
            <ul className={style.ul1}>
              <li>
                <img src="/images/detail/juxing@2x.png" alt="" className={style.img}/>
                <div className={style.title}>水电费第三方收到食发鬼发个发个方</div>
                <div className={style.jie}>是打发第三方第三方第三方的事故发生故事大概多少个十多个大哥大哥我告诉撒旦撒旦</div>
                <div className={style.ren}>
                  <img src="/images/出游路线@2x.png" alt=""/>
                  <span>周树人</span>
                </div>
              </li>
            </ul>
          </div>
       </div>
      </div>
    );
  }
}

export default Com
